<template>
  <svg id="graphic" class="graphic" :viewBox="viewBox" v-if="showGraphic">
    <g>
      <polygon
        v-for="polygon in sectorImageData.polygons"
        class="area-default"
        :points="polygon.points"
        :style="{ fill: matchColor(polygon.id) }"
      ></polygon>
    </g>
    <g>
      <g v-for="seat in arrangedData">
        <g v-for="center in seat.centers">
          <text
            class="text-default"
            :transform="`translate(${center.x - 66} ${center.y - 0})`"
          >
            {{ seat.seatName }}
          </text>
        </g>
      </g>
    </g>
  </svg>
</template>

<script setup>
import { h, ref, computed, nextTick, watch, onMounted, onUnmounted } from "vue";
import useCommonStore from "@/store/common.js";
import useFlowStore from "@/store/flow.js";
import sectorImageData from "./SectorImageData.json";

const commonStore = useCommonStore();
const flowStore = useFlowStore();

const Props = defineProps({
  seatData: {
    type: Object,
    required: true,
  },
});

const showGraphic = ref(true);
const viewBox = ref(sectorImageData.viewBox);

const matchColor = (code) => {
  let color = "rgba(128,128,128,0.5)";

  Object.keys(Props.seatData).forEach((key) => {
    if (key == code || Props.seatData[key].includes(code)) {
      if (commonStore.darkMode) {
        color = flowStore.seatColors[key][0];
      } else {
        color = flowStore.seatColors[key][1];
      }
    }
  });
  // Props.seatData.forEach((cell, index) => {
  //   if (cell.seatName == code || cell.sectorCodes.includes(code)) {
  //     if (commonStore.darkMode) {
  //       color = flowStore.seatColors[cell.seatName][0];
  //     } else {
  //       color = flowStore.seatColors[cell.seatName][1];
  //     }
  //   }
  // });
  return color;
};

const sectors = computed(() => {
  let data = {};
  for (let i = 0; i < sectorImageData.polygons.length; i++) {
    let code = sectorImageData.polygons[i].id;
    let z = sectorImageData.polygons[i].z;
    let g = sectorImageData.polygons[i].g;
    let points = sectorImageData.polygons[i].points.split(" ");
    let p = new Array();
    for (let j = 0; j < points.length; j += 2) {
      p.push({ x: Number(points[j]), y: Number(points[j + 1]) });
    }
    data[code] = { p, z, g };
  }
  return data;
});

const arrangedData = computed(() => {
  let data = new Array();
  let keys = Object.keys(Props.seatData);
  for (let i = 0; i < keys.length; i++) {
    let seat = {
      seatName: keys[i],
      sectorCodes: Props.seatData[keys[i]],
    };
    seat.centers = new Array();
    let ranges = [
      { v: false, t: 0, r: 0, b: 0, l: 0 },
      { v: false, t: 0, r: 0, b: 0, l: 0 },
      { v: false, t: 0, r: 0, b: 0, l: 0 },
    ];
    seat.sectorCodes.forEach((item, index) => {
      if (sectors.value[item]) {
        sectors.value[item].p.forEach((point) => {
          let range = ranges[sectors.value[item].g];
          if (range.t > point.y || !range.v) {
            range.t = point.y;
          }
          if (range.b < point.y || !range.v) {
            range.b = point.y;
          }
          if (range.l > point.x || !range.v) {
            range.l = point.x;
          }
          if (range.r < point.x || !range.v) {
            range.r = point.x;
          }
          range.v = true;
        });
      }
    });
    ranges.forEach((item, index) => {
      if (item.v) {
        let x = Number((0.5 * (item.r + item.l)).toFixed(2));
        let y = Number((0.5 * (item.t + item.b)).toFixed(2));
        seat.centers.push({ x, y });
      }
    });
    data.push(seat);
  }
  return data;
});
</script>

<style scoped>
.graphic {
  transition: all 0.3s ease-in-out;
  /* margin-top: 24px; */
}
.area-default {
  stroke: rgba(0, 0, 0, 0.25);
  stroke-width: 2;
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.area-default:hover {
  opacity: 1;
}

.text-default {
  fill: #fff;
  font-family: Consolas;
  font-weight: bold;
  font-size: 84px;
  /* font-size: 24px; */
  text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 16px #000;
  user-select: none;
  cursor: pointer;
}
.text-medium {
  font-size: 48px;
}

.text-small {
  font-size: 36px;
}
.text-mini {
  font-size: 28px;
  font-weight: normal;
}
</style>
